<template>
  <el-card shadow="never">
    <div>
      <div class="flex items-start justify-between">
        <div>
          <el-col>
            <el-row class="items-center">
              <span class="text-xl font-bold text-#475c9d">{{ business.name }}</span>
              <el-progress
                class="ml-30px w-130px"
                :percentage="business.profileScore"
                color="#0bbb85"
              />
            </el-row>
          </el-col>
        </div>
        <div v-if="!isShow">
          <el-button size="small" v-if="arrId && arrId.length" @click="previouNumber"
            >上一条</el-button
          >
          <el-button size="small" v-if="arrId && arrId.length" @click="nextNumber"
            >下一条</el-button
          >
          <el-tooltip class="box-item" effect="dark" content="打开新页面" placement="bottom-start">
            <router-link
              :to="{
                path: '/crm/business/detail/' + business.id,
                query: { isShow: true }
              }"
              target="_blank"
            >
              <el-button :icon="FullScreen" size="small" style="margin-left: 10px"></el-button>
            </router-link>
          </el-tooltip>
        </div>
      </div>
    </div>
    <div class="mt-10px">
      <el-descriptions :column="5" direction="vertical">
        <el-descriptions-item label="客户名称">{{ business.customerName }}</el-descriptions-item>
        <el-descriptions-item label="商机金额（元）">
          {{ erpPriceInputFormatter(business.totalPrice) }}
        </el-descriptions-item>
        <el-descriptions-item label="商机组">{{ business.statusTypeName }}</el-descriptions-item>
        <el-descriptions-item label="负责人">{{ business.ownerUserName }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ formatDate(business.createTime) }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div>
      <!-- 下面：按钮 -->
      <slot></slot>
    </div>
  </el-card>
</template>
<script lang="ts" setup>
import { Star, Edit } from '@element-plus/icons-vue'
import * as BusinessApi from '@/api/crm/business'
import { formatDate } from '@/utils/formatTime'
import { erpPriceInputFormatter } from '@/utils'
import { FullScreen } from '@element-plus/icons-vue'

const props = defineProps<{ business: BusinessApi.BusinessVO; isShow: Boolean; arrId: Array }>()

const emit = defineEmits(['againCustomer', 'queryRemaining'])
// 下一条
const nextNumber = () => {
  const index = props.arrId.indexOf(props.business.id) + 1
  //下一页 有/无 值
  if (props.arrId.length == 10) {
    if (props.arrId[index]) {
      emit('againCustomer', props.arrId[index])
    } else {
      emit('queryRemaining', 'next')
    }
  } else {
    // 必定没下一页
    if (props.arrId[index]) {
      emit('againCustomer', props.arrId[index])
    } else {
      ElMessage.warning('已经是最后一个了！')
    }
  }
}
// 上一条
const previouNumber = () => {
  const index = props.arrId.indexOf(props.business.id) - 1
  if (props.arrId[index]) {
    emit('againCustomer', props.arrId[index])
  } else {
    emit('queryRemaining', 'previous')
  }
}
</script>
<style scoped lang="scss">
::v-deep(.el-descriptions__label.el-descriptions__cell:not(.is-bordered-label).is-vertical-label) {
  color: #959595;
}

::v-deep(.el-descriptions__body .el-descriptions__table .el-descriptions__cell) {
  color: #000;
}
</style>
